<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content">
	<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用户名</label>
    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
        <div class="mui-input-row">
        <label>语音输入</label>
        <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
</form>
	
	<style type="text/css">
	#popover{
		height: 150px;
		width:400px;
	}
	</style>
	<div id="popover" class="mui-popover mui-popover-bottom">
		<div class="mui-popover-arrow"></div>
		<div class="mui-scroll-wrapper">
		    <div class="mui-scroll">
			    <ul class="mui-table-view">
			    	<li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    	<li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    	<li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    	<li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    	<li class="mui-table-view-cell"><a href="#">Item5</a></li>
			    </ul>
			</div>
		</div>
	</div>
	<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
	
	<ul class="mui-table-view">
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	</ul>
	
	  <div class="mui-slider-indicator">
	    <div class="mui-indicator mui-active"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	  </div>
	</div>
	<ul class="mui-table-view mui-grid-view mui-grid-9">
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-home"></span>
	        <div class="mui-media-body">Home</div>
	    </a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
	        <div class="mui-media-body">Email</div>
	    </a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-chatbubble"></span>
	        <div class="mui-media-body">Chat</div>
	    </a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-location"></span>
	        <div class="mui-media-body">Location</div>
	    </a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-search"></span>
	        <div class="mui-media-body">Search</div>
	    </a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	    <a href="#">
	        <span class="mui-icon mui-icon-phone"></span>
	        <div class="mui-media-body">Phone</div>
	    </a>
	</li>
	    </ul>
	<ul class="mui-table-view">
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	</ul>
    </div>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" id="home">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item" id="user_info">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    	mui('.mui-sroll-wrapper').scroll();
    	
//  	document.getElementById("home").addEventListener("tap",function(){
//  		alert("你点我了");
//  	})

		document.getElementById('home').addEventListener('tap',function () {
//		       alert("你点我了"); 
			mui.toast("123");
		})
		
		document.getElementById('user_info').addEventListener('tap',function () {
		        mui.openWindow({
		        	url:"user_info.html",
		        	id:"user_info.html",
		        	styles:{
		        		top:"0px",
		        		bottom:"49px"
		        	},
		        	extras:{
		        		username:"Alaxander.DSB.Li",
		        		password:"123",
		        		gender:"456"
		        	}
		        })
		})
    
    
    </script>
</body>
</html>
